<template>
  <div class="xiangqing">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tabs v-model="cutYield" @tab-click="handleClick">
            <!-- 返回按钮 -->
            <div class="dijing">
              <el-button-group class="hidden-sm-and-down">
                <el-button
                  type="primary"
                  icon="el-icon-arrow-left"
                  @click="fanhui"
                  >返回收益记录表</el-button
                >
              </el-button-group>
            </div>

            <el-tab-pane label="返佣收益" name="fanyong">
              <!-- 表格数据 -->
              <div class="zhanshixiangqing hidden-sm-and-down">
                <el-table :data="listData" style="width: 100%" align="center">
                  <el-table-column label="充值时间" align="center">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.create_time
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="user__username"
                    label="用户名"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="real_pay"
                    label="充值金额"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="income"
                    label="返佣金额"
                    align="center"
                  >
                    <!--<template slot-scope="scope">
                      {{
                       scope.row.yonhu__shangjiyonghu == user.id // 当前用户的下级用户
                         ? scope.row.shangjifanyongjinge
                         : scope.row.fanyongjinge
                      }}
                    </template>-->
                  </el-table-column>
                  <template slot="empty" v-if="loding">
                    <img class="data-pic" src="@/assets/BGT.png" alt="" />
                  </template>
                </el-table>
              </div>

              <div
                class="block hidden-sm-and-down"
                style="height: 60px;background-color: #FFF;"
              >
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="dangyetiaoshu"
                  :page-sizes="xiabiao"
                  :page-size="xianshitiaoshu"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tiaoshu"
                >
                </el-pagination>
              </div>
              <div class="sjdijing">
                <el-button-group class="hidden-sm-and-up">
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="fanhui"
                    >返回收益记录表</el-button
                  >
                </el-button-group>
              </div>

                <!-- 返佣收益移动端 -->
              <div class="zhanshixiangqing hidden-sm-and-up">
                <el-table :data="listData" style="width: 100%" align="center">
                  <el-table-column label="充值时间" align="center">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.create_time
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="user__username"
                    label="用户名"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="real_pay"
                    label="充值金额"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="income"
                    label="返佣金额"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <!--{{ scope.row.yonhu__shangjiyonghu==user.id ? scope.row.fanyongjinge:scope.row.shangjifanyongjinge}} -->
                      {{ scope.row.income}}
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div
                class="block hidden-sm-and-up"
                style="height: 70px;background-color: #FFF;margin-top: -15px;"
              >
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="dangyetiaoshu"
                  :page-sizes="xiabiao"
                  :page-size="xianshitiaoshu"
                  layout="total, sizes, prev, pager, next"
                  :total="tiaoshu"
                >
                </el-pagination>
              </div>

            </el-tab-pane>
            <el-tab-pane label="差额收益" name="chae">
              <!-- 差额收益PC端 -->
              <div class="zhanshixiangqing hidden-sm-and-down">
                <el-table :data="dataList" style="width: 100%" align="center">
                  <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.create_time }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="real_consume"
                    label="充值金额"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="income"
                    label="返佣获利"
                    align="center"
                  ></el-table-column>
                  <el-table-column label="下单用户名" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.user__username}}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <template slot="empty">
                  <img class="data-pic" src="@/assets/BGT.png" alt="" />
                </template>
              </div>

              <div
                class="block hidden-sm-and-down"
                style="height: 60px;background-color: #FFF;"
              >
                <el-pagination
                  @size-change="balancePaging"
                  @current-change="handleBalance"
                  :current-page="dangyetiaoshu"
                  :page-sizes="xiabiao"
                  :page-size="xianshitiaoshu"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tiaoshu2"
                >
                </el-pagination>
              </div>

              <div class="sjdijing">
                <el-button-group class="hidden-sm-and-up">
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="fanhui"
                    >返回收益记录表</el-button
                  >
                </el-button-group>
              </div>

              <!-- 差额收益移动端 -->
              <div class="zhanshixiangqing hidden-sm-and-up">
                <el-table :data="dataList" style="width: 100%" align="center">
                  <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.create_time
                      }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="yonghu__yonhuming" label="用户名" align="center"></el-table-column> -->
                  <el-table-column
                    prop="all_day_pay"
                    label="总充值"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="all_day_brokerage"
                    label="总返佣"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="all_day_payoff"
                    label="总差额"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>

              <div
                class="block hidden-sm-and-up"
                style="height: 70px;background-color: #FFF;margin-top: -15px;"
              >
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="dangyetiaoshu"
                  :page-sizes="xiabiao"
                  :page-size="xianshitiaoshu"
                  layout="total, sizes, prev, pager, next"
                  :total="tiaoshu2"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dataList:[],
      cutYield:'fanyong',
      listData:[],
      list_cnt:'',
      all_income:'',
      all_brokerage:'',
      all_payoff:'',
      page_index:1,
      page_cnt:10,
      tableData: [], //表格数据
      tableData2: [], //手机表格数据
      dangyetiaoshu: 1, //当前页数
      xiabiao: [10, 20, 50, 100], //选择页面显示多少条
      xianshitiaoshu: 10, //页面显示的条数
      tiaoshu: 0, //有多少页
      zongtiaoshu: 0, //总条数
      activeName: "1",
      shouji: [], //手机数据
      aaaaa: "fanyong",
      tiaoshu2: 0, //有多少页
      zongtiaoshu2: 0, //总条数
      loding: false
    };
  },
  created() {
    this.zhanshixiangqing();
  },
  methods: {
      //差额收益接口
     async difference(){
       let data ={
         day_time:this.$route.query.create_time,
         page_index:this.page_index,
         page_cnt:this.page_cnt
       }
       const [err, res] = await this.$http.request({
          url:'/payOffRecord',
          method:'GET',
          data
       })
       if (err) return;
       console.log(res.data.data.list_cnt)
       this.dataList=res.data.data.payoff_list
       this.tiaoshu2=res.data.data.list_cnt
    },
    // 返佣收益接口
    async zhanshixiangqing() {
      let data={
        day_time:this.$route.query.create_time,
        page_index:this.page_index,
        page_cnt:this.page_cnt
      }
      const [err, res] = await this.$http.request({
        url: "/brokerageRecord",
        method: "GET",
        data
      });
      if (err) return;
      // console.log(res.data.data.brokerage_list);
      this.listData=res.data.data.brokerage_list
      this.tiaoshu=res.data.data.list_cnt
      this.listData.map(item=>{
        return item.create_time=item.create_time.replace('T','').slice(0,18)
      })
    },
    //差额分页
    balancePaging(val){
      this.page_cnt=val
      this.difference()
    },
    //差额换页
    handleBalance(val){
      this.page_index
      this.difference()
    },
    //返佣分页
    async handleSizeChange(val) {
      this.page_cnt=val
      this.zhanshixiangqing()
    },
    //返佣换页
    async handleCurrentChange(val) {
      this.page_index=val
      this.zhanshixiangqing()
    },
    fanhui() {
      this.$router.push("/Commissionrecord");
    },
    handleClick() {
      console.log(this.cutYield);
      if(this.cutYield==='fanyong'){
        this.zhanshixiangqing()
      }
      if(this.cutYield==='chae'){
        this.difference()
      }
	}

  },
  computed: {
    ...mapState(["user"])
  }
};
</script>

<style scoped lang="stylus">
@import './xiangqing.styl';
</style>
